<template>
  <div class="room-config">
    <el-card class="config-card">
      <template #header>
        <div class="card-header">
          <span>机房配置</span>
          <el-button v-if="currentRoom" type="primary" link @click="handleClear">
            清除配置
          </el-button>
        </div>
      </template>

      <div v-loading="loading || roomConfigStore.loading" class="config-content">
        <template v-if="currentRoom">
          <div class="current-room">
            <h3>当前机房</h3>
            <el-descriptions :column="2" border>
              <el-descriptions-item label="机房名称">
                {{ currentRoom.room_name }}
              </el-descriptions-item>
              <el-descriptions-item label="位置">
                {{ currentRoom.location }}
              </el-descriptions-item>
              <el-descriptions-item label="建筑">
                {{ currentRoom.building_name }}
              </el-descriptions-item>
              <el-descriptions-item label="楼层">
                {{ currentRoom.floor_number }}
              </el-descriptions-item>
              <el-descriptions-item label="状态">
                <el-tag :type="getStatusType(currentRoom.status)">
                  {{ currentRoom.status }}
                </el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="安全等级">
                {{ currentRoom.security_level }}
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </template>

        <div class="room-selector">
          <h3>{{ currentRoom ? '切换机房' : '选择机房' }}</h3>
          <el-table
            :data="rooms"
            style="width: 100%"
            @row-click="handleSelectRoom"
            highlight-current-row
            :current-row-key="currentRoom?.room_id"
          >
            <el-table-column prop="room_name" label="机房名称" min-width="160" />
            <el-table-column prop="location" label="位置" min-width="180" />
            <el-table-column prop="building_name" label="建筑" width="120" />
            <el-table-column prop="floor_number" label="楼层" width="80" align="center" />
            <el-table-column label="状态" width="100">
              <template #default="{ row }">
                <el-tag :type="getStatusType(row.status)" size="small">
                  {{ row.status }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRoomConfigStore } from '@/store/roomConfigStore'
import type { RoomInfo } from '@/api/types'
import { assetService } from '@/api/assetService'

const roomConfigStore = useRoomConfigStore()
const loading = ref(false)
const rooms = ref<RoomInfo[]>([])

const currentRoom = computed(() => roomConfigStore.currentRoom)

// 获取状态类型
const getStatusType = (status: string) => {
  switch (status) {
    case '正常':
      return 'success'
    case '异常':
      return 'danger'
    case '维护中':
      return 'warning'
    default:
      return 'info'
  }
}

// 获取机房列表
const fetchRooms = async () => {
  loading.value = true
  try {
    const response = await assetService.getRooms({
      page: 1,
      pageSize: 100,
    })
    rooms.value = response.items
  } catch (err) {
    console.error('获取机房列表失败:', err)
    ElMessage.error('获取机房列表失败')
  } finally {
    loading.value = false
  }
}

// 选择机房
const handleSelectRoom = async (room: RoomInfo) => {
  try {
    await ElMessageBox.confirm(`确认选择 ${room.room_name} 作为当前操作机房？`, '提示', {
      type: 'warning',
    })
    roomConfigStore.setCurrentRoom(room)
    ElMessage.success('机房配置已更新')
  } catch (error) {
    if (error !== 'cancel') {
      console.error('设置机房失败:', error)
      ElMessage.error('设置机房失败')
    }
  }
}

// 清除配置
const handleClear = async () => {
  try {
    await ElMessageBox.confirm('确认清除当前机房配置？', '提示', {
      type: 'warning',
    })
    roomConfigStore.setCurrentRoom(null)
    ElMessage.success('机房配置已清除')
  } catch (error) {
    if (error !== 'cancel') {
      console.error('清除配置失败:', error)
      ElMessage.error('清除配置失败')
    }
  }
}

// 初始化
onMounted(() => {
  fetchRooms()
  roomConfigStore.loadStoredConfig()
})
</script>

<style scoped lang="scss">
.room-config {
  .config-card {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .config-content {
      min-height: 400px;

      .current-room {
        margin-bottom: 32px;
        padding-bottom: 24px;
        border-bottom: 1px solid var(--el-border-color-light);

        h3 {
          margin: 0 0 16px;
          font-size: 16px;
          color: var(--el-text-color-primary);
        }
      }

      .room-selector {
        h3 {
          margin: 0 0 16px;
          font-size: 16px;
          color: var(--el-text-color-primary);
        }
      }
    }
  }
}
</style>
